<template>
	<h2>shallowReactive 与 shallowRef</h2>
	<h3>m1:{{ m1 }}</h3>
	<h3>m2:{{ m2 }}</h3>
	<h3>m3:{{ m3 }}</h3>
	<h3>m4:{{ m4 }}</h3>
	<hr />
	<button @click="update">更新数据</button>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, shallowReactive, shallowRef } from "vue"

export default defineComponent({
	name: "App",
	setup() {
		// shallowReactive : 只处理了对象内最外层属性的响应式(也就是浅响应式)

		// shallowRef: 只处理了value的响应式, 不进行对象的reactive处理

		// 深度劫持（深度响应式）
		const m1 = reactive({
			name: "佐助",
			age: 20,
			car: {
				name: "奔驰",
				color: "green"
			}
		})

		// 浅度劫持（浅度响应式）
		const m2 = shallowReactive({
			name: "佐助",
			age: 20,
			car: {
				name: "奔驰",
				color: "green"
			}
		})

		// 深度劫持（深度响应式）
		const m3 = ref({
			name: "佐助",
			age: 20,
			car: {
				name: "奔驰",
				color: "green"
			}
		})

		// 浅度劫持（浅度响应式）
		const m4 = shallowRef({
			name: "佐助",
			age: 20,
			car: {
				name: "奔驰",
				color: "green"
			}
		})

		const update = () => {
			// 更改m1的数据--reactive
			m1.name += "==="
			m1.car.name += "--"
			// 更改m2的数据--shallowReactive
			m2.name += "==="
			m2.car.name += "--"
			// 更改m3的数据--ref
			m3.value.name += "==="
			m3.value.car.name += "--"
			// 更改m4的数据--shallowRef
			m4.value.name += "==="
			m4.value.car.name += "--"
		}

		return {
			m1,
			m2,
			m3,
			m4
		}
	}
})
</script>
